<template>
	<view class="orderdetial">
		<headertop title="确认订单" str1="oridei" :back1="back1"></headertop>
		<view class="orderdetialback">

		</view>

		<view class="centerbox">
			<view class="addressbox" @click="open">
				<view class="topline">
					<view class=""
						style="font-weight: bold;font-family: PingFang SC, PingFang SC;font-size: 28rpx;color: #333333;margin-left: 28rpx;">
						{{query.th_type==1?'收货地址':'门店地址'}}
					</view>
					<view class="rightbtn" v-if="jineobj.th_type==3">
						<view :class="query.th_type==1?'btn ff':'btn'" @click.stop="qiehuantyppe(1) ">
							快递
						</view>
						<view :class="query.th_type==2?'btn ff':'btn'" @click.stop="qiehuantyppe(2)">
							自提
						</view>
					</view>
				</view>
				<view class="topline">
					<template v-if="(dzobj&&query.th_type==1)||(query.th_type==2&&query.shopid)">
						<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (6).png"
							class="addressicon" mode=""></image>
						<view class="text">
							{{query.th_type==1?dzobj.name:mdobj.title}}
						</view>
						<view class="phone">
							{{query.th_type==1?dzobj.mobile:mdobj.telphone}}
						</view>
					</template>

					<view class="title" style="display:flex;align-items: center;" v-if="!dzobj&&query.th_type==1">
						{{query.th_type==1?'添加地址':'选择门店'}}
						<image style="width: 36rpx;height: 36rpx;"
							src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (7).png" mode="" />
					</view>
					<view class="title" style="display:flex;align-items: center;"
						v-if="!query.shopid &&query.th_type==2">
						{{query.th_type==1?'添加地址':'选择门店'}}
						<image style="width: 36rpx;height: 36rpx;"
							src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (7).png" mode="" />
					</view>
				</view>

				<view class="addresboline" v-if="dzobj||(query.th_type==2&&mdobj.address)">
					<view class="addrestext">
						{{query.th_type==1?`${dzobj.province_name}${dzobj.city_name}${dzobj.district_name}${dzobj.address}`:mdobj.address}}
					</view>
					<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (7).png"
						v-if="query.th_type==1" @click="godz" class="rightarrow" mode=""></image>
					<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (7).png"
						v-if="query.th_type==2&&query['shopid']" class="rightarrow" mode=""></image>

				</view>

			</view>
			<view class="spbox1">
				<view class="spbox" v-if="typestr!='购物车'">
					<image :src="selectedSkuPrice['image']||shangpingobj['image']" class="leftimg" mode=""></image>
					<view class="texts">
						<view class="t1">
							{{shangpingobj['title']}}
						</view>
						<view class="t2">
							{{shangpingobj['subtitle']}}
						</view>
						<view class="t3line">
							<view class="box1">
								x1
							</view>
							<view class="gnq">
								<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11197@2x.png"
									class="icon" mode="" @click="add('-')"></image>
								<span>{{selectedSkuPrice['goods_num']}}</span>
								<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11198@2x.png"
									class="icon" mode="" @click="add('+')"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="spbox" v-if="typestr=='购物车'" v-for="(item,index) in gouwc" :key="item.id">
					<image :src="item['sku_price']['image']||item['goods']['image']" class="leftimg" mode=""></image>
					<view class="texts">
						<view class="t1">
							{{item['goods']['title']}}
						</view>
						<view class="t2">
							{{item['goods']['subtitle']}}
						</view>
						<view class="t3line">
							<view class="box1">
								x1
							</view>
							<view class="gnq">
								<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11197@2x.png"
									class="icon" mode="" @click="add('-',index)"></image>
								<span>{{item['goods_num']}}</span>
								<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11198@2x.png"
									class="icon" mode="" @click="add('+',index)"></image>
							</view>
						</view>
						<view class="jiage1">
							￥<span>{{jigaefun(item.sku_price.price)}}.</span><span>{{jigaefun(item.sku_price.price,'后')}}</span>
						</view>
					</view>
				</view>
				<view class="bbtm">
					<view class="ll">
						<view class="bt">
							配送：
						</view>
						<view class="rightcontent">
							<span>{{query.th_type==1?'快递运输':'自提'}}</span>
							<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (8).png" mode="">
							</image>
						</view>
					</view>
					<view class="ll">
						<view class="bt">
							备注：
						</view>
						<view class="rightcontent">
							<input type="text" placeholder="请输入备注" />
						</view>
					</view>
				</view>

			</view>

			<view class="jigemx">
				<view class="center">
					<view class="t1">
						价格明细
					</view>
					<view class="line1">
						<view class="tt">
							商品总价：共{{query['goods_list'].length}}件商品
						</view>
						<view class="tt">
							￥{{jineobj.goods_amount}}
						</view>
					</view>
					<view class="line1">
						<view class="tt">
							运费：
						</view>
						<view class="tt">
							￥{{jineobj.dispatch_amount}}
						</view>
					</view>
					<view class="bottomline">
						<view class="tt1">
							实付款：
						</view>
						<view class="jiage1">
							￥{{jineobj.order_amount }}
						</view>
					</view>
				</view>
			</view>
			<view class="zhifubox" @click="active2=1">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11345@2x.png" class="logoicon"
					mode=""></image>
				<view class="title">
					微信支付
				</view>
				<image
					:src="active2==1?'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11469@2x (1).png': 'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Ellipse 2228@2x.png'"
					class="xq" mode=""></image>
			</view>
			<view class="zhifubox" @click="active2=2" style="margin-bottom: 32rpx;">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11590@2x.png" class="logoicon"
					mode="" />
				<view class="title">
					余额支付 <span>（可用￥{{userobj.money||0}}）</span>
				</view>
				<image
					:src="active2==2?'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11469@2x (1).png': 'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Ellipse 2228@2x.png'"
					class="xq" mode=""></image>
			</view>
		</view>

		<view class="" style="height: 200rpx;">

		</view>

		<!-- 已完成 -->
		<view class="fixed">
			<view class="fixedline">
				<view class="jinetext">
					合计：<span style="color: #F53F3F;font-size:32rpx ;">￥{{jineobj.order_amount}}</span>
				</view>
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Button@2x.png" class="btnimg"
					@click="tjdd" mode=""></image>
			</view>
		</view>

		<up-popup :show="show" mode="center">
			<view class="zhifusucess" v-if="typestr1!='门店'">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (9).png" class="closeicon"
					mode="" @click="show=false" />
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x(19).png" mode=""
					class="centernimg"></image>
				<view class="text">
					支付成功
				</view>
				<view class="btnss">
					<view class="btn1" @click="back">
						返回首页
					</view>
					<view class="btn2" @click="gopage()">
						查看订单
					</view>
				</view>
			</view>
			<view class="centeraddress" v-if="typestr1=='门店'">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Rectangle 24571@2x.png"
					class="centeraddressback" mode="">
				</image>
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (9).png" class="closeicon"
					mode="" @click="show=false">
				</image>
				<view class="title">
					请选择自提门店
				</view>
				<view class="" style="height: 110rpx;">

				</view>
				<view class="addressboxs">
					<view :class="active==index?'addressboxs_item backk':'addressboxs_item'"
						v-for="(item,index) in menduianarr" :key="index" @click="active=index">
						<!-- <view class="dqright" v-if="active==index">
							<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Rectangle 24598@2x.png" mode=""></image>
							<span>当前门店</span>
						</view> -->
						<view class="texts">
							<view class="t1">
								{{item.title}}
							</view>
							<view class="t2">
								<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (10).png"
									class="addressicon" mode="">
								</image>
								<view class="addresstt">
									{{item.address}}
								</view>
								<view class="juli">
									距离：{{(item.distance).toFixed(2)}}km
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="btn" @click="xzmd()">
					确定
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		addressfile,
		allshop,
		calcorder,
		createorder,
		payPrepay,
		userinfo
	} from "@/api/my.js";
	import {
		cartList
	} from "@/api/home.js";
	import headertop from '@/components/header.vue'
	const back1 = ref('')
	const show = ref(false)
	const typestr = ref('')
	const typestr1 = ref('')

	const active = ref(1)
	const active1 = ref(0)
	const active2 = ref(null)
	const payoid1 = ref('')
	const shangpingobj = ref({})
	const jineobj = ref({})
	const gouwc = ref([])
	const dzobj = ref({})
	const menduianarr = ref([])
	const userobj = ref({})
	const mdobj = reactive({
		title: '请选择自提门店',
		address: '',
		telphone: ''
	})
	const th_type = ref('')
	const selectedSkuPrice = ref({})
	const opttype = ref('')
	const query = reactive({
		address_id: '',
		th_type: 1,
		shopid: '',
		goods_list: '',
		order_type: 'goods'
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#FBE7D2'
		} else {
			back1.value = ''
		}

	})

	function qiehuantyppe(num) {
		query.th_type = num
		jisuanjiage1()
	}

	function jigaefun(str1, strr) {
		let number = Number(str1).toFixed(2)
		let str = number.toString(); // 转换为字符串 "100.00"
		let parts = str.split('.'); // 按小数点分割
		let integerPart = parts[0]; // "100"
		let decimalPart = parts[1] || "00"; // "00"（如果没有小数部分，默认 "00"）
		if (!strr) {
			return integerPart
		} else {
			return decimalPart
		}

	}

	async function getuser() {
		const res = await userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}
	onShow(() => {
		getuser()
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		typestr.value = options.typestr
		if (typestr.value == '购物车') {
			if (options.type == 'express') {
				query.th_type = 1
				th_type.value = 1
			} else {
				query.th_type = 2
				th_type.value = 2
			}
			opttype.value = options.type
			carinit()
		} else {
			shangpingobj.value = uni.getStorageSync('detailobj')
			if (shangpingobj.value.is_ziti == 'ziti') {
				query.th_type = 2
				th_type.value = 2
			} else {
				query.th_type = 0
				th_type.value = 0
			}
			selectedSkuPrice.value = uni.getStorageSync('selectedSkuPrice')
			var shuju = [{
				'goods_id': shangpingobj.value.id,
				'goods_num': selectedSkuPrice.value.goods_num,
				'goods_sku_price_id': selectedSkuPrice.value.id
			}]
			query.goods_list = shuju
			getdz()
		}

		uni.getSetting({
			success: (res) => {
				if (!res.authSetting['scope.userLocation']) {
					// 未授权，发起授权请求
					uni.authorize({
						scope: 'scope.userLocation',
						success: () => {
							initmendian()
						},
						fail: () => {
							uni.showModal({
								title: '提示',
								content: '需要位置权限才能使用该功能',
								showCancel: false,
								success() {
									uni.openSetting({
										success(res) {
											if (res
												.authSetting[
													'scope.userLocation'
												]) {

												initmendian()

											} else {
												uni.showToast({
													title: '位置授权失败',
													icon: 'none'
												})
											}
										}
									})
								}
							});
						}
					});
				} else {
					// 已授权，直接获取位置
					initmendian()
				}
			}
		});
	})
	async function carinit(type) {
		const res = await cartList({
			type: opttype.value
		})
		if (res.code == 1) {
			var arr = uni.getStorageSync('gouwc')
			for (var i in res.data) {
				var ind = arr.findIndex(item => item.id == res.data[i]['id'])
				if (ind != -1) {
					arr[ind]['sku_price']['stock'] = res.data[i]['sku_price']['stock']
				}
			}
			gouwc.value = arr
			var shuju = []
			for (var i in gouwc.value) {
				var obj = {
					'goods_id': gouwc.value[i].goods_id,
					'goods_num': gouwc.value[i].goods_num,
					'goods_sku_price_id': gouwc.value[i]['sku_price']['id']
				}
				shuju.push(obj)
			}
			query.goods_list = shuju
			getdz()
		}
	}

	async function tjdd() {
		if (!active2.value) {
			uni.showToast({
				title: '请选择支付方式',
				icon: 'none'
			})
			return
		}
		if (query.th_type == 1) {
			if (!query.address_id) {
				uni.showToast({
					title: '请添加快递地址',
					icon: 'none'
				})
				return
			}
		} else if (query.th_type == 2) {
			if (!query.shopid) {
				uni.showToast({
					title: '请选择门店',
					icon: 'none'
				})
				return
			}
		}
		// if (jineobj.value.order_amount * 1 > userobj.value.money * 1) {
		// 	uni.showToast({
		// 		title: '余额不足',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		const res = await createorder(query)
		if (res.code == 1) {
			const res1 = await payPrepay({
				order_sn: res.data.order_sn,
				payment: active2.value == 1 ? 'wechat' : 'money'
			})
			var payoid = res.data.id
			payoid1.value = payoid
			if (active2.value == 1) {
				var payobj = res1.data.pay_data
				uni.requestPayment({
					timeStamp: String(payobj.timeStamp),
					nonceStr: payobj.nonceStr,
					package: payobj.package,
					signType: payobj.signType,
					paySign: payobj.paySign,
					success(res) {
						typestr1.value = '支付成功'
						show.value = true
					},
					fail(e) {
						setTimeout(() => {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						}, 500)
						uni.redirectTo({
							url: '/pages/fenlei/orderdetial?id=' + payoid
						})
					}
				})
			} else {
				if (res1.code == 1) {
					show.value = true
					typestr1.value = '支付成功'
				} else {
					uni.showToast({
						title: res1.msg,
						icon: 'none'
					})
				}
			}
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function back() {
		uni.switchTab({
			url: '/pages/home/index'
		})
	}

	function gopage() {
		uni.redirectTo({
			url: '/pages/fenlei/orderdetial?id=' + payoid1.value
		})
	}

	function xzmd() {

		mdobj.title = menduianarr.value[active.value]['title']
		mdobj.address = menduianarr.value[active.value]['address']
		mdobj.telphone = menduianarr.value[active.value]['telphone']
		query.shopid = menduianarr.value[active.value]['id']
		show.value = false
	}

	function add(type, ind) {
		if (typestr.value == '购物车') {
			if (type == '+') {
				if (gouwc.value[ind]['goods_num'] >= gouwc.value[ind]['sku_price']['stock']) {
					uni.showToast({
						title: '商品库存不足',
						icon: 'none'
					})
					return
				}
				gouwc.value[ind]['goods_num']++
			} else {
				if (gouwc.value[ind]['goods_num'] == 1) return
				gouwc.value[ind]['goods_num']--
			}
			var shuju = []
			for (var i in gouwc.value) {
				var obj = {
					'goods_id': gouwc.value[i].goods_id,
					'goods_num': gouwc.value[i].goods_num,
					'goods_sku_price_id': gouwc.value[i]['sku_price']['id']
				}
				shuju.push(obj)
			}
			query.goods_list = shuju
		} else {
			if (type == '+') {
				if (selectedSkuPrice.value['goods_num'] >= selectedSkuPrice.value['stock']) {
					uni.showToast({
						title: '商品库存不足',
						icon: 'none'
					})
					return
				}
				selectedSkuPrice.value['goods_num']++
			} else {
				if (selectedSkuPrice.value['goods_num'] == 1) return
				selectedSkuPrice.value['goods_num']--
			}
			var shuju = [{
				'goods_id': shangpingobj.value.id,
				'goods_num': selectedSkuPrice.value.goods_num,
				'goods_sku_price_id': selectedSkuPrice.value.id
			}]
			query.goods_list = shuju
		}


		jisuanjiage1()
	}

	function initmendian() {

		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				var lat = res.latitude
				var lng = res.longitude
				initmendian1(lat, lng)
			},
			fail: (err) => {
				uni.showToast({
					title: '获取定位失败',
					icon: 'none'
				})
			}
		});

	}
	async function getdz(id) {
		const res = await addressfile()
		if (res.code == 1) {
			if (res.data) {
				dzobj.value = res.data
				query.address_id = dzobj.value.id
			} else {
				dzobj.value = null
			}
			jisuanjiage()
		}

	}
	async function jisuanjiage1() {
		const res = await calcorder({
			address_id: query.address_id,
			th_type: query.th_type,
			shopid: query.shopid,
			goods_list: query.goods_list,
			order_type: 'goods'
		})
		if (res.code == 1 || res.code == 0) {
			jineobj.value.goods_amount = res.data.goods_amount
			jineobj.value.dispatch_amount = res.data.dispatch_amount
			jineobj.value.order_amount = res.data.order_amount
		}
	}
	async function jisuanjiage(str) {
		const res = await calcorder({
			address_id: query.address_id,
			th_type: th_type.value,
			shopid: query.shopid,
			goods_list: query.goods_list,
			order_type: 'goods'
		})
		if (res.code == 1 || res.code == 0) {
			jineobj.value = res.data
			if (str == 'add') return
			if (jineobj.value.th_type == 2) {
				query.th_type = jineobj.value.th_type
			} else {
				query.th_type = 1
			}
		}
	}
	async function initmendian1(lat, lng) {
		const res = await allshop({
			lat,
			lng
		})
		if (res.code == 1) {
			menduianarr.value = res.data
		}
	}

	function open() {
		if (query.th_type == 1) {
			godz()
		} else {
			show.value = true
			typestr1.value = '门店'
		}
	}

	function godz() {
		uni.navigateTo({
			url: '/pages/my/shouhuodz?typestr=dz'
		})
	}
</script>

<style lang="scss">
	.jiage1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #F53F3F;
	}

	.backk {
		border: 2rpx solid #A46F3A;
	}

	page {
		background: #F7F8FA;
	}

	::v-deep .u-popup__content {
		border-radius: 32rpx 32rpx 32rpx 32rpx;
	}

	.zhifusucess {
		width: 610rpx;
		background: linear-gradient(180deg, #FDE9D2 0%, #FFFFFF 27%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.closeicon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 24rpx;
			top: 24rpx;
		}

		.centernimg {
			width: 124rpx;
			height: 124rpx;
			margin-top: 108rpx;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			margin-top: 20rpx;
		}

		.btnss {
			width: 538rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 64rpx;

			.btn1 {
				width: 254rpx;
				height: 64rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #86909C;
				text-align: center;
				line-height: 64rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
			}

			.btn2 {
				width: 254rpx;
				height: 64rpx;
				background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				text-align: center;
				line-height: 64rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	.centeraddress {
		width: 594rpx;
		overflow: hidden;
		height: 736rpx;
		border-radius: 20rpx !important;
		position: relative;

		.centeraddressback {
			width: 594rpx;
			height: 760rpx;
			position: absolute;
		}

		.btn {
			width: 530rpx;
			height: 72rpx;
			background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			text-align: center;
			line-height: 72rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 34rpx;
			position: absolute;
			z-index: 999;
			margin-left: 32rpx;
		}

		.centeraddressimg {
			width: 594rpx;
			height: 736rpx;
			position: absolute;
			z-index: -1;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #1D2129;
			width: 100%;
			text-align: center;
			margin-top: 74rpx;
			position: absolute;
			z-index: 999;
		}

		.addressboxs {
			width: 530rpx;
			margin: auto;
			height: 444rpx;
			margin-top: 24rpx;
			overflow-y: scroll;

			&_item {
				width: 525rpx;
				margin-bottom: 24rpx;
				position: relative;
				overflow: hidden;
				background: #F7F8FA;
				border-radius: 10rpx;
				// height: 144rpx;

				.dqright {
					width: 110rpx;
					height: 36rpx;
					position: absolute;
					right: 0%;
					top: 0%;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 36rpx;
					display: flex;
					justify-content: center;
					z-index: 999;

					image {
						width: 110rpx;
						height: 36rpx;
						z-index: -1;
						position: absolute;

					}
				}

				.texts {
					width: 482rpx;
					margin: auto;
					overflow: hidden;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏超出容器的部分 */
					text-overflow: ellipsis;

					/* 超出部分显示为省略号 */
					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D2129;
						margin-top: 24rpx;
					}

					.t2 {
						display: flex;
						width: 100%;
						margin-top: 28rpx;
						margin-bottom: 28rpx;
						align-items: center;

						.addressicon {
							width: 32rpx;
							height: 32rpx;
						}

						.addresstt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							width: 300rpx;
							// white-space: nowrap;
							// overflow: hidden;
							// text-overflow: ellipsis;
							overflow: hidden;
							/* 隐藏超出范围的内容 */
							display: -webkit-box;
							/* 设置为WebKit内核的弹性盒子模型 */
							-webkit-line-clamp: 2;
							/* 限制显示的行数 */
							-webkit-box-orient: vertical;
							/* 垂直排列子元素 */
							/* 限制文本显示为2行 */
							white-space: pre-wrap;
						}

						.juli {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							margin-left: 16rpx;
						}
					}
				}

				&_img {
					width: 530rpx;
					height: 132rpx;
					position: absolute;
					z-index: -1;
				}
			}
		}

		.closeicon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 24rpx;
			top: 24rpx;
		}
	}

	.orderdetial {
		width: 100%;
		overflow: hidden;

		.hxbtn {
			width: 686rpx;
			height: 82rpx;
			background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 24rpx;
			margin-bottom: 58rpx;
		}

		.fixed {
			width: 100%;
			height: 186rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0%;
			z-index: 999;

			.fixedline {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				position: relative;

				.btnimg {
					width: 420rpx;
					height: 88rpx;
					position: absolute;
					right: 0%;
					margin-right: 32rpx;
				}

				.jinetext {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #4E5969;
				}
			}
		}

		.orderdetialback {
			position: absolute;
			z-index: -1;
			height: 314rpx;
			background: linear-gradient(180deg, #FCE6CD 0%, rgba(252, 230, 205, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			width: 100%;
		}

		.centerbox {
			width: 686rpx;
			margin: auto;
			margin-top: 232rpx;

			.zttext {
				width: 100%;
				overflow: hidden;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #1D2129;
				}

				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #1D2129;
					margin-top: 14rpx;
				}
			}

			.zhifubox {
				width: 686rpx;
				height: 92rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: auto;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				position: relative;

				.logoicon {
					width: 52rpx;
					height: 52rpx;
					margin-left: 20rpx;
				}

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1D2129;
					margin-left: 12rpx;
				}

				.xq {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 0%;
					margin-right: 28rpx;
				}
			}

			.jigemx {
				width: 686rpx;
				height: 326rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 28rpx auto;
				overflow: hidden;

				.center {
					width: 630rpx;
					margin: auto;
					margin-top: 32rpx;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D2129;
						margin-bottom: 20rpx;
					}

					.line1 {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							margin-bottom: 24rpx;
						}


					}

					.bottomline {
						width: 100%;
						height: 102rpx;
						display: flex;
						align-items: center;
						border-top: 2rpx solid #F2F3F5;
						justify-content: space-between;

						.tt1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
						}

						.jiage1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #F53F3F;
						}
					}
				}
			}

			.spbox1 {
				width: 100%;
				overflow: hidden;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				background: #FFFFFF;
				margin-top: 28rpx;

				.bbtm {
					width: 630rpx;
					height: 154rpx;
					margin: auto;
					border-top: 2rpx solid #F2F3F5;

					.ll {
						width: 630rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 28rpx;

						.bt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
						}

						.rightcontent {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							display: flex;
							align-items: center;

							input {
								text-align: right;
							}

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}
					}
				}

				.spbox {
					width: 686rpx;
					height: 212rpx;
					margin: auto;
					display: flex;
					align-items: center;

					.leftimg {
						width: 156rpx;
						height: 156rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						margin-left: 28rpx;
					}

					.texts {
						width: 462rpx;
						margin-left: 12rpx;

						.t1 {
							width: 356rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #1D2129;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							/* 限制文本显示为2行 */
							overflow: hidden;
						}

						.t2 {
							width: 356rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #7F7F7F;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							/* 限制文本显示为2行 */
							overflow: hidden;
							margin-top: 10rpx;
						}

						.t3line {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							// margin-top: 22rpx;

							.gnq {
								width: 148rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 32rpx;
								color: #1D2129;

								.icon {
									width: 48rpx;
									height: 48rpx;
								}
							}

							.box1 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #7F7F7F;
							}
						}
					}
				}
			}


			.addressbox {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 42rpx;

				.addresboline {
					width: 630rpx;
					margin: 24rpx auto;
					justify-content: space-between;
					display: flex;

					.addrestext {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #777777;
						width: 558rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.rightarrow {
						width: 32rpx;
						height: 32rpx;
					}
				}


				.topline {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 28rpx;
					position: relative;

					.addressicon {
						margin-left: 28rpx;
						width: 32rpx;
						height: 32rpx;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 30rpx;
						margin-left: 25rpx;
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						margin-left: 16rpx;
					}

					.phone {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						margin-left: 24rpx;
					}

					.rightbtn {
						width: 200rpx;
						height: 56rpx;
						background: #A46F3A;
						border-radius: 27rpx 27rpx 27rpx 27rpx;
						position: absolute;
						right: 0;
						margin-right: 28rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						z-index: 99;

						.ff {
							background: #FFFFFF !important;
							color: #A46F3A !important;
						}

						.btn {
							width: 96rpx;
							height: 52rpx;
							text-align: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
							border-radius: 27rpx 27rpx 27rpx 27rpx;
							line-height: 52rpx;
						}
					}
				}
			}
		}
	}
</style>